<!DOCTYPE html>
<html>
    <head>
        <title>hightcharts and datatables Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="/site_media/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="/site_media/css/bootstrap.css" rel="stylesheet" media="screen">
        <link href="/site_media/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
        <link href="/site_media/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <script src="/site_media/js/jquery.js"></script>
        <script src="/site_media/js/bootstrap.js"></script>
        <script src="/site_media/media/js/jquery.dataTables.js"></script>
        <script src="/site_media/hightcharts/highcharts.js"></script>
        <script src="/site_media/hightcharts/modules/exporting.js"></script>
        <script language="JavaScript" type="text/javascript" src="/site_media/js/common.js"></script>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="brand" href="#">Project name</a>
                    <div class="nav-collapse collapse">
                        <p class="navbar-text pull-right">
                        Logged in as <a href="#" class="navbar-link">Username</a>
                        </p>
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#about">About</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span3">
                    <div class="well sidebar-nav">
                        <ul class="nav nav-list">
                            <li class="nav-header">Sidebar</li>
                            <li class="active"><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li class="nav-header">Sidebar</li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li class="nav-header">Sidebar</li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                        </ul>
                    </div><!--/.well -->
                </div><!--/span-->
                <div class="span9">
                    <div id="container" >
                        <input type="hidden" id="t" value="[-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]">
                        <input type="hidden" id="t" value="[-0.1, 1.8, 5.7, 11.9, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]">
                    </div>
                    <div class="row-fluid">
                        <table class="table table-striped"  id="example">
                            <thead>
                                <tr>
                                    <th>question</th>
                                    <th>votes</th>
                                    <th>pub_date</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for user in users %}
                                    <tr>
                                    <td>{{ user.question }}</td>
                                    <td>{{ user.votes }}</td>
                                    <td>{{ user.pub_date }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot>
                            </tfoot>
                        </table>
                    </div>

                </div><!--/span-->
            </div><!--/row-->

            <hr>

            <footer>
            <p>&copy; Company 2013</p>
            </footer>

        </div><!--/.fluid-container-->
    </body>
</html>
